<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表动画</title>
    <link rel="stylesheet" href="./css/animate.css">
    <style>
        .v-enter,
        .v-enter-to{
            opacity: 0;
            transform: translateY(80px);
        }
        .v-enter-active,
        .v-leave-active{
            transition:all 0.6s ease;
        }
        .v-move{
            transition: all 0.6s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            age:<input type="number" v-model="uage">
            name:<input type="text" v-model="uname">
            <button @click="add">添加</button>
        </div>
        <transition-group tag="ul">
            
            <li v-for="(item,index) in peoples" :key="item.id"
                @click="del(index)"
            >
                姓名：{{item.name}}  年龄：{{item.age}}
            </li>
        </transition-group>
    </div>
</body>
<script src='../js/vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            uage:null,
            uname:null,
            peoples:[
                {id:1,name:"张龙",age:20},
                {id:2,name:"赵虎",age:20},
                {id:3,name:"王朝",age:20},
                {id:4,name:"马汉",age:20}
            ]
        },
        methods: {
            add(){
                this.peoples.unshift({
                    id:[this.peoples.length-1].id+1,
                    name:this.uname,
                    age:this.uage
                })
            },
            del(index){
                this.peoples.splice(index,1)
            }
        }
    })
</script>
</html>